<template>
  <el-drawer size="80%" :title="dialogTitle" v-model="dialogVisible">
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="交接单号">
          {{ detailData.handoverNumber }}
        </el-descriptions-item>
        <el-descriptions-item label="交接日期">
          {{ formatDate2(detailData.createDate) }}
        </el-descriptions-item>
        <el-descriptions-item label="移交公司">
          {{ detailData.transferCompany }}
        </el-descriptions-item>
        <el-descriptions-item label="移交人">
          {{ detailData.transferPerson }}
        </el-descriptions-item>
        <el-descriptions-item label="接收公司">
          {{ detailData.receivingCompany }}
        </el-descriptions-item>
        <el-descriptions-item label="接收人">
          {{ detailData.receiverPerson }}
        </el-descriptions-item>
        <el-descriptions-item label="交接方式">
          {{ detailData.handoverMethod }}
        </el-descriptions-item>
        <el-descriptions-item label="创建者">
          {{ detailData.creatorName }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDate(detailData.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ formatDate(detailData.updateTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ detailData.remark || '无' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 交接附件 -->
      <div class="mt-20px">
        <h3 class="mb-15px font-bold">交接附件</h3>
        <OaFileManager :header="false" :initial-file-ids="detailData.files" />
      </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { formatDate, formatDate2 } from '@/utils/formatTime'
import { HandoverManagementApi, HandoverManagementVO } from '@/api/oa/handovermanagement'
import * as UserApi from '@/api/system/user'
import OaFileManager from '@/components/Oa/OaFileManager.vue'

/** 交接管理详情 */
defineOptions({ name: 'HandoverManagementDetail' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const loading = ref(true)
const detailData = ref<HandoverManagementVO>({} as HandoverManagementVO)

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = '查看交接单详情'
  resetData()
  
  loading.value = true
  try {
    const data = await HandoverManagementApi.getHandoverManagement(id)
    detailData.value = data
    
    // 获取创建者姓名
    if (data.creator) {
      try {
        const user = await UserApi.getUser(data.creator)
        detailData.value.creatorName = user.nickname
      } catch (error) {
        console.error('获取用户信息失败', error)
        detailData.value.creatorName = '未知'
      }
    }
  } catch (error) {
    message.error('获取详情失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

/** 重置数据 */
const resetData = () => {
  detailData.value = {} as HandoverManagementVO
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

 